<script setup lang="ts">
    // import { useIpcRenderer } from "@vueuse/electron"
    // import { useWindowStore } from "@renderer/store"
    // import { toRefs } from "vue";

    // const windowStore = useWindowStore();
    // const { closeGiftWindow } = windowStore;
    // const { giftId } = toRefs(windowStore);

    // const ipcRenderer = useIpcRenderer();
        // 关闭窗口
    const closeWin = ()=>{
        window.electron.ipcRenderer.send('window-close',"GIFT")
        // closeGiftWindow()
        // console.log(ipcRenderer)j
    }

    function getLog(){
        // console.log(localStorage.getItem('user'))
        // console.log(giftId.value)
    }
</script>
wwdw
<template>
    <div class="gift">
        <div class="title">
            <span class="txt">互动</span>
            <p class="drag"></p>
            <span class="close" @click="closeWin"><el-icon size="20px" color="#FFFFFF"><Close /></el-icon></span>
        </div>
        <div class="content">
            <el-row class="list" :gutter="10">
                <el-col :span="6" v-for="item in 80" :key="item" @click="getLog">
                    <div class="item">
                        <img class="img" src="@renderer/assets/images/bound.png" alt="">
                        <span class="name">小心心</span>
                        <span class="price">1钻石</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .gift{
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px;
            // background-color: red;
            box-sizing: border-box;
            padding: 0 30px;
            flex-shrink: 0;
            .txt{
                color: #FFFFFF;
                font-size: 36px;
                font-weight: 600;
            }
            .drag{
                flex: 1;
                height: 100%;
                -webkit-app-region: drag;
            }
            .close{
                width: 50px;
                height: 50px;
                display: flex;
                // background-color: red;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                border-radius: 10px;
                &:hover{
                    background-color: rgba(255,255,255,.1);
                }
            }
        }
        .content{
            flex: 1;
            height: 0;
            overflow: auto;
            // padding: 1px;
            border: 1px solid rgb(51, 51, 51);
            box-sizing: border-box;
            background-color: rgb(34, 34, 34);
            padding-top: 30px;
            // padding-bottom: 20px;
            .list{
                height: 100%;
                width: 100%;
                overflow: auto;
                .item{
                    // width: 150px;
                    // background-color: red;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 20px;
                    // padding: 20px;
                    padding-top: 20px;
                    padding-bottom: 10px;
                    border-radius: 10px;
                    cursor: pointer;
                    &:hover{
                        background: rgba(255,255,255,.1);
                    }
                    .img{
                        height: 100px;
                    }
                    .name{
                        color: #FFFFFF;
                        margin-top: 20px;
                    }
                    .price{
                        color: rgb(141, 141, 141);
                        margin-top: 10px;
                    }
                }
            }
        }
    }
</style>